<template>
  <div class="page-header-index-wide" v-has="'user:isShowFrontPage'">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="currentMonth + '月下载次数'" :total="month.monthDownload">
          <a-tooltip title="指标说明：下载次数统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <span>{{ currentYear }}</span>
            年下载总次数
            <span>：{{ year.yearDownload }}</span>
            <div style="float:right;color:#1E90FF">
              <span @click="check(1)" style="color:#1E90FF;cursor: pointer;">查看</span>
              <!-- <span @click="check(1)" style="color:#1E90FF">查看|</span> -->
              <!-- <span @click="detailVisible = true" style="color:#1E90FF">下载详情</span> -->
            </div>
            <div>
              <mini-bar :height="60" :dataSource="downloadSourceData" />
            </div>
          </template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="currentMonth + '月搜索次数'" :total="month.monthSearch">
          <a-tooltip title="指标说明：搜索次数统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <span>{{ currentYear }}</span>
            年搜索总次数
            <span>：{{ year.yearSearch }}</span>
            <span @click="check(2)" style="float:right;color:#1E90FF;cursor: pointer;">查看</span>
            <div>
              <mini-area :height="60" :dataSource="searchSourceData" />
            </div>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="currentMonth + '月上传次数'" :total="month.monthUpload">
          <a-tooltip title="指标说明：上传次数统计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <span>{{ currentYear }}</span>
            <span @click="check(3)" style="float:right;color:#1E90FF;cursor: pointer;">查看</span>
            年上传总次数
            <span>：{{ year.yearUpload }}</span>
            <div>
              <mini-line :height="60" :dataSource="uploadSourceData" />
            </div>
          </template>
        </chart-card>
      </a-col>

      <!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="搜索次数" :total="846 | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>

          <template slot="footer">
            日搜索次数
            <span> {{ '34' | NumberFormat }}</span>
            <div>
              <mini-area :height="60" />
            </div>
          </template>
        </chart-card>
      </a-col> -->

      <!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="下载记录" :total="560 | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :height="40" />
          </div>
          <template slot="footer">上升率 <span>60%</span></template>
        </chart-card>
      </a-col> -->
      <!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="数据置信度" total="98%">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="90" :percentage="98" :height="8" />
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px">
              <span slot="term">同周比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日环比</span>
              80%
            </trend>
          </template>
        </chart-card>
      </a-col> -->
    </a-row>

    <!-- <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }" />
          </div>
          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额排行" :dataSource="barData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="销售趋势" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额趋势" :dataSource="barData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card> -->

    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="访问量统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info :title="'本周访问量'" :content="accessData.weekData"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info :title="'本月访问量'" :content="accessData.monthData"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info :title="'本年访问量'" :content="accessData.yearData"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
          </a-row>
          <span @click="accessCheck" style="float:right;color:#1E90FF;cursor: pointer;">查看</span>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>

 <!-- 下载详情 -->
    <a-row>
      <a-col :span="24">
        <a-card :loading="downLoading" :bordered="false" title="下载次数" :style="{ marginTop: '24px' }">
          <div class="head">
            <!-- <el-select v-model="typeChoose" placeholder="请选择类型" @change="detail(1)" size="small">
              <el-option v-for="item in typeOpt" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-select v-model="timeChoose" placeholder="请选择时限" @change="detail(1)" size="small">
              <el-option v-for="item in timeOpt" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-button @click="detail">查询</el-button> -->
            <el-button @click="exportExcel" size="small">导出EXCEL表</el-button>
          </div>
          <div class="content">
            <div class="table">
              <div class="tableTitle">
                <div class="item" v-for="(item,index) in 3">
                  <div class="type" v-for="i in typeOpt">{{i.label}}</div>
                  <div class="count">{{timeOpt[timeLabel.indexOf(timeChoose)].label}}</div>
                </div>
              </div>
              <div class="NotableData" v-if="downTotal == 0">
                <img src="../../assets/nodata.png">
              </div>
              <div class="tableData" v-else>
                <div class="item" v-for="item in downData">
                  <div class="type">{{item.grade}}</div>
                  <div class="type">{{item.parameterId}}</div>
                  <div class="count">{{item.count}}</div>
                </div>
              </div>
            </div>
            <div class="page">
              <div>共 {{downTotal}} 条</div>
              <el-pagination background layout="prev, pager, next" :total="downTotal" :current-page="downCurrentPage" @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- 下载详情 -->

    <!-- 查看弹窗 -->
    <el-dialog :title="checkDialogName + '柱状图（折线图）'" :visible.sync="checkVisible" width="70%" :close-on-click-modal="false">
      <!-- 此处使用v-if="checkVisible"用于关闭弹窗时销毁el-tabs -->
      <el-tabs v-if="checkVisible" type="border-card" @tab-click="check">
        <el-tab-pane label="按月分布">
          <el-card ref="checkCard">
            <div id="main0" style="height:600px;width:100%"></div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="按年分布">
          <el-card ref="checkCard">
            <div id="main1" style="height:600px;width:100%"></div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看弹窗 -->

    <!-- 查看弹窗 -->
    <el-dialog :title="'访问次数柱状图（折线图）'" :visible.sync="accessVisible" width="70%" :close-on-click-modal="false">
      <!-- 此处使用v-if="checkVisible"用于关闭弹窗时销毁el-tabs -->
      <el-tabs v-if="accessVisible" type="border-card" @tab-click="accessCheck">
        <el-tab-pane label="按周分布">
          <el-card ref="checkCard">
            <div id="mainA" style="height:600px;width:100%"></div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="按月分布">
          <el-card ref="checkCard">
            <div id="mainB" style="height:600px;width:100%"></div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="按年分布">
          <el-card ref="checkCard">
            <div id="mainC" style="height:600px;width:100%"></div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="accessVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看弹窗 -->
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniLine from '@/components/chart/MiniLine'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import * as echarts from 'echarts'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}
export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniLine,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      dataMonth: [],
      dataYear: [],
      currentMonth: '',
      currentYear: '',
      month: {
        monthDownload: 0,
        monthSearch: 0,
        monthUpload: 0
      },
      year: {
        yearDownload: 0,
        yearSearch: 0,
        yearUpload: 0
      },
      downloadSourceData: [],
      searchSourceData: [],
      uploadSourceData: [],
      checkVisible: false,
      checkDialogName: '',
      currentType: '',
      /*************echarts图部分************** */
      GraphOption: {
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ['line', 'bar'] },
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      },
      /*************echarts图部分************** */

      /*************访问量统计************** */
      access: {},
      accessData: {
        weekData: '',
        monthData: '',
        yearData: ''
      },
      // accessTitle: {
      //   weekTitle: '',
      //   monthTitle: '',
      //   yearTitle: ''
      // }
      accessVisible: false,
      AccessOption: {
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ['line', 'bar'] },
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      },
      /*************访问量统计************** */

      /*************下载详情统计************** */
      detailVisible: false,
      typeChoose:'牌号',
      timeChoose:'year',
      typeOpt: [
        { value: "牌号", label: "牌号" },
        { value: "编号", label: "编号" },
      ],
      timeOpt: [
        { value: "month", label: "本月" },
        { value: "year", label: "本年" },
      ],
      timeLabel: ["month", "year"],
      downLoading: false,
      downData: [
        // {name1: "1000L", name2: "1000L", count: 1},
        // {name: "10号钢", count: 4},
        // {name: "15SW1100", count: 1},
        // {name: "16Mn", count: 1},
        // {name: "25Cr2Ni4MoV", count: 3},
        // {name: "30Q130", count: 2},
        // {name: "35WW250", count: 5},
        // {name: "45号钢", count: 1},
        // {name: "DT3电工纯铁", count: 1},
      ],
      downTotal: 0,
      downPages: 0,
      downCurrentPage: 0,
    }
  },
  mounted() {
    this.getDownloadNum()
    this.getAccessNum()
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
    this.detail(1)
  },
  methods: {
    drawChart(num) {
      if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
        this.myChart.dispose() //销毁
      }
      if (num == -1) {
        this.$nextTick(() => {
          let newPromise = new Promise(resolve => {
            resolve()
          })
          newPromise.then(() => {
            this.myChart = echarts.init(document.getElementById('main0'))
            this.myChart.setOption(this.GraphOption)
          })
        })
      } else {
        this.$nextTick(() => {
          let newPromise = new Promise(resolve => {
            resolve()
          })
          newPromise.then(() => {
            this.myChart = echarts.init(document.getElementById('main' + num))
            this.myChart.setOption(this.GraphOption)
          })
        })
      }
    },
    detail(pageNo) { // 下载详情
      if(this.timeChoose == '' || this.typeChoose == '') {
        Message({
          showClose: true,
          message: '请选择时限',
          type: 'warning',
        })
      } else {
        this.axios({
          baseURL: 'http://59.172.104.174:30669',
          url: '/downloadHistory/getALLDownloadHistory',
          method: 'POST',
          params: {
            pageSize: 9,
            pageNo: pageNo,
            type: "编号",// this.typeChoose,   // “编号”或“牌号”
            typeDate: this.timeChoose // “year”或“month”
          },
        }).then(res => {
          console.log(res);
          console.log(res.data.result.list.records);
          let records = res.data.result.list.records
          this.downTotal = res.data.result.list.total
          this.downPages = res.data.result.list.pages
          this.downCurrentPage = res.data.result.list.current
          console.log(records.length % 3);
          if(records.length % 3 == 0) {
            this.downData = records
          } else {
            this.downData = records
            let num = 3 - records.length%3
            for(let i = 0; i < num; i++) {
              this.downData.push({ grade:"--", parameterId:"--", count:"--" })
            }
          }
        })
      }
    },
    exportExcel() {
      if(this.timeChoose == '' || this.typeChoose == '') {
        Message({
          showClose: true,
          message: '请选择时限',
          type: 'warning',
        })
      } else {
        this.axios({
          baseURL: 'http://59.172.104.174:30669',
          url: '/downloadHistory/downloadHistory',
          method: 'GET',
          responseType: 'blob', // 表明返回服务器返回的数据类型
          params: {
            typeDate: this.timeChoose // “year”或“month”
          },
        }).then(res => {
          console.log(res);
         
          let blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel'
          })
          let fileName = '下载次数.xlsx'
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            var link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            //释放内存
            window.URL.revokeObjectURL(link.href)
          }
        })
      }
    },
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.detail(newPage);
    },
    check(type) {
      console.log(type);
      console.log(type.index);
      var num = 0
      if (type.index == undefined) {
        num = -1
        this.currentType = type
      } else {
        num = type.index
      }
      this.checkVisible = true
      this.GraphOption.xAxis.data = []
      this.GraphOption.series[0].data = []

      // 按月分布处理数据（月的tabs为0）
      if (type.index == undefined) {
        if (this.currentType == 1) {
          this.checkDialogName = '下载次数'
          for (let i = this.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < this.dataMonth.length; i++) {
            this.GraphOption.xAxis.data.push(this.dataMonth[i].date_month)
            this.GraphOption.series[0].data.push(this.dataMonth[i].downloadNum)
          }
        } else if (this.currentType == 2) {
          this.checkDialogName = '搜索次数'
          for (let i = this.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < this.dataMonth.length; i++) {
            console.log('this.dataMonth', this.dataMonth)
            this.GraphOption.xAxis.data.push(this.dataMonth[i].date_month)
            this.GraphOption.series[0].data.push(this.dataMonth[i].searchNum)
          }
        } else if (this.currentType == 3) {
          this.checkDialogName = '上传次数'
          for (let i = this.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < this.dataMonth.length; i++) {
            this.GraphOption.xAxis.data.push(this.dataMonth[i].date_month)
            this.GraphOption.series[0].data.push(this.dataMonth[i].uploadNum)
          }
        }
      } else {
        if (this.currentType == 1 && type.label === '按月分布') {
          this.checkDialogName = '下载次数'
          for (let i = this.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < this.dataMonth.length; i++) {
            this.GraphOption.xAxis.data.push(this.dataMonth[i].date_month)
            this.GraphOption.series[0].data.push(this.dataMonth[i].downloadNum)
          }
        } else if (this.currentType == 2 && type.label === '按月分布') {
          this.checkDialogName = '搜索次数'
          for (let i = this.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < this.dataMonth.length; i++) {
            this.GraphOption.xAxis.data.push(this.dataMonth[i].date_month)
            this.GraphOption.series[0].data.push(this.dataMonth[i].searchNum)
          }
        } else if (this.currentType == 3 && type.label === '按月分布') {
          this.checkDialogName = '上传次数'
          for (let i = this.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < this.dataMonth.length; i++) {
            this.GraphOption.xAxis.data.push(this.dataMonth[i].date_month)
            this.GraphOption.series[0].data.push(this.dataMonth[i].uploadNum)
          }
        }
      }

      // 按年分布处理数据（年的tabs为1）
      if (this.currentType == 1 && type.label == '按年分布') {
        this.checkDialogName = '下载次数'
        for (let i = 0; i < this.dataYear.length; i++) {
          this.GraphOption.xAxis.data.push(this.dataYear[i].date_year)
          this.GraphOption.series[0].data.push(this.dataYear[i].downloadNum)
        }
      } else if (this.currentType == 2 && type.label == '按年分布') {
        this.checkDialogName = '搜索次数'
        for (let i = 0; i < this.dataYear.length; i++) {
          this.GraphOption.xAxis.data.push(this.dataYear[i].date_year)
          this.GraphOption.series[0].data.push(this.dataYear[i].searchNum)
        }
      } else if (this.currentType == 3 && type.label == '按年分布') {
        this.checkDialogName = '上传次数'
        for (let i = 0; i < this.dataYear.length; i++) {
          this.GraphOption.xAxis.data.push(this.dataYear[i].date_year)
          this.GraphOption.series[0].data.push(this.dataYear[i].uploadNum)
        }
      }

      this.drawChart(num)
    },
    drawAccessChart(index) {
      if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
        this.myChart.dispose() //销毁
      }
      if (index == 0 || index == undefined) {
        this.$nextTick(() => {
          let newPromise = new Promise(resolve => {
            resolve()
          })
          newPromise.then(() => {
            this.myChart = echarts.init(document.getElementById('mainA'))
            this.myChart.setOption(this.AccessOption)
          })
        })
      } else if (index == 1) {
        this.$nextTick(() => {
          let newPromise = new Promise(resolve => {
            resolve()
          })
          newPromise.then(() => {
            this.myChart = echarts.init(document.getElementById('mainB'))
            this.myChart.setOption(this.AccessOption)
          })
        })
      } else if (index == 2) {
        this.$nextTick(() => {
          let newPromise = new Promise(resolve => {
            resolve()
          })
          newPromise.then(() => {
            this.myChart = echarts.init(document.getElementById('mainC'))
            this.myChart.setOption(this.AccessOption)
          })
        })
      }
    },
    accessCheck(type) {
      console.log('typetype', type)
      this.accessVisible = true
      this.AccessOption.xAxis.data = []
      this.AccessOption.series[0].data = []
      if (type.index == undefined || type.index == 0) {
        for (let i = 11; i >= 0; i--) {
          this.AccessOption.xAxis.data.push(this.access.listWeek[i].week)
          this.AccessOption.series[0].data.push(this.access.listWeek[i].count)
        }
      } else if (type.index == 1) {
        for (let i = 11; i >= 0; i--) {
          this.AccessOption.xAxis.data.push(this.access.listMonth[i].month)
          this.AccessOption.series[0].data.push(this.access.listMonth[i].count)
        }
      } else if (type.index == 2) {
        console.log('this.access.listYear.length', this.access.listYear.length)
        for (let i = this.access.listYear.length - 1; i >= 0; i--) {
          this.AccessOption.xAxis.data.push(this.access.listYear[i].year)
          this.AccessOption.series[0].data.push(this.access.listYear[i].count)
        }
      }
      this.drawAccessChart(type.index)
    },

    // 获取周月年访问量
    getAccessNum() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/sysLog/getStatics',
        method: 'POST'
      }).then(res => {
        console.log('周月年访问量', res)
        this.access = res.data.result
        this.accessData.weekData = res.data.result.listWeek[0].count.toString()
        this.accessData.monthData = res.data.result.listMonth[0].count.toString()
        this.accessData.yearData = res.data.result.listYear[0].count.toString()
        // this.accessTitle.weekTitle = res.data.result.listWeek[0].week
        // this.accessTitle.monthTitle = res.data.result.listMonth[0].month
        // this.accessTitle.yearTitle = res.data.result.listYear[0].year

        this.visitInfo = []
        for (let i = 11; i >= 0; i--) {
          this.visitInfo.push({
            type: res.data.result.listWeek[i].week,
            visit: res.data.result.listWeek[i].count
          })
        }
      })
    },

    // 获取年月下载量
    getDownloadNum() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/searchStatistics/getStatics',
        method: 'POST'
      }).then(res => {
        this.dataMonth = res.data.result.dataMonth
        this.dataYear = res.data.result.dataYear
        this.currentMonth = res.data.result.currentDateMonth
        this.currentYear = res.data.result.currentDateYear
        this.month.monthDownload = res.data.result.dataMonth[res.data.result.dataMonth.length - 1].downloadNum
        this.month.monthSearch = res.data.result.dataMonth[res.data.result.dataMonth.length - 1].searchNum
        this.month.monthUpload = res.data.result.dataMonth[res.data.result.dataMonth.length - 1].uploadNum
        this.year.yearDownload = res.data.result.dataYear[res.data.result.dataYear.length - 1].downloadNum
        this.year.yearSearch = res.data.result.dataYear[res.data.result.dataYear.length - 1].searchNum
        this.year.yearUpload = res.data.result.dataYear[res.data.result.dataYear.length - 1].uploadNum
        for (let i = res.data.result.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < res.data.result.dataMonth.length; i++) {
          this.downloadSourceData.push({
            x: res.data.result.dataMonth[i].date_month,
            y: res.data.result.dataMonth[i].downloadNum
          })
        }
        for (let i = res.data.result.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < res.data.result.dataMonth.length; i++) {
          this.searchSourceData.push({
            x: res.data.result.dataMonth[i].date_month,
            y: res.data.result.dataMonth[i].searchNum
          })
        }
        for (let i = res.data.result.dataMonth.length - 12 >= 0 ? res.data.result.dataMonth.length - 12 : 0; i < res.data.result.dataMonth.length; i++) {
          this.uploadSourceData.push({
            x: res.data.result.dataMonth[i].date_month,
            y: res.data.result.dataMonth[i].uploadNum
          })
        }
      })
    },
    initLogInfo() {
      getLoginfo(null).then(res => {
        if (res.success) {
          Object.keys(res.result).forEach(key => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      // getVisitInfo().then(res => {
      //   if (res.success) {
      //     this.visitInfo = res.result
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

/* 下载次数 */
.head {
  margin-bottom: 20px;
  margin-right: 14px;
  display: flex;
  justify-content: space-between;
  .el-select {
    margin-right: 20px;
  }
}
.content {
  .tableTitle {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    display: flex;
    .item {
      background-color: #fafafa;
    }
    .item:last-child{
      border-right: 1px solid #e8e8e8;
    }
  }
  .tableData {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    display: flex;
    margin-bottom: 20px;
    .item:nth-child(3n) {
      border-right: 1px solid #e8e8e8;
    }
    .item:nth-last-child(3),.item:nth-last-child(2),.item:nth-last-child(1) {
      border-bottom: 1px solid #e8e8e8;
    }
  }
  .NotableData {
    width: 99%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    height: 150px;
    border: 1px solid #e8e8e8;
    // border-top: none;
    margin-bottom: 20px;
    img {
      height: 100%;
      width: 200px;
      display: flex;
      align-content: center;
      justify-content: center;
    }
  }
  .page {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item{
    display: flex;
    width: 33%;
    border: 1px solid #e8e8e8;
    height: 38px;
    line-height: 38px;
    border-bottom: none;
    border-right: none;
    .type,.count {
      width: 50%;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
